<template>
  <view class="api-page">
    <view class="page-title">API</view>
    <view class="btn-list">
      <button class="api-btn" @click="handleLog">打印日志</button>
      <button class="api-btn" @click="handleTimer">计时器</button>
      <button class="api-btn" @click="handleStorage">数据缓存</button>
      <button class="api-btn jump-btn" @click="jumpToDownload">下载图片</button>
      <button class="api-btn jump-btn" @click="jumpToImage">选择图片</button>
    </view>
    <PageNav currentPage="api" />
  </view>
</template>

<script setup>
import PageNav from '@/components/PageNav.vue';

const handleLog = () => {
  console.log("这是一条测试日志～");
  uni.showToast({ title: "日志已打印", icon: "none" });
};

const handleTimer = () => {
  let count = 0;
  const timer = setInterval(() => {
    count++;
    console.log(`计时器已运行 ${count} 秒`);
    if (count >= 5) {
      clearInterval(timer);
      uni.showToast({ title: "计时器已停止", icon: "none" });
    }
  }, 1000);
};

const handleStorage = () => {
  const userInfo = { name: "测试用户", age: 20 };
  uni.setStorageSync("userInfo", userInfo);
  const storedInfo = uni.getStorageSync("userInfo");
  console.log("缓存的数据：", storedInfo);
  uni.showToast({ title: "数据缓存成功", icon: "none" });
};

const jumpToDownload = () => {
  uni.navigateTo({ url: '/pages/download/download' });
};
const jumpToImage = () => {
  uni.navigateTo({ url: '/pages/image/image' });
};
</script>

<style scoped>
.api-page {
  padding: 20rpx;
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-color: #fff;
}
.page-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx 0;
  color: #333;
}
.btn-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  max-width: 500rpx;
  margin: 0 auto;
}
.api-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 8rpx;
}

.jump-btn {
  background-color: #e8f4fd;
  color: #007aff;
}
</style>